<template>
  <div class="content">
    <el-form>
      <el-form-item label="银行卡：">
        <el-select
          v-model="bankCard"
          placeholder="Select"
          style="width: 240px"
          @change="findBanlane"
        >
          <el-option
            v-for="item in bankList"
            :key="item.id"
            :label="item.bankCard"
            :value="item.bankCard"
          ></el-option>
        </el-select>
      </el-form-item>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-form-item label="请选择定期存款：">
        <el-select
          v-model="id"
          :placeholder="message"
          style="width: 240px"
        >
          <el-option
            v-for="item in fxiedprice"
            :key="item.id"
            :label="'余额：' + item.balance + '元   定期日期：' + item.dname"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请输入转款金额：">
        <el-input
          v-model="money"
          placeholder="请输入转款金额"
          style="width: 150px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          class="btn"
          type="primary"
          @click="centerDialogVisible = true"
        >
          确认申请
        </el-button>
      </el-form-item>
    </el-form>
    <span>
      注意事项：
      <span>
        1、存管银行规定，活期存款的利息计算方式：
        <br />
        2、活期存款利息为0.035%，按日计息，按天计息。
        <br />
        3、定期转为活期的，会按照活期的0.035%利率计算利息。结算到原有余额
        <br />
      </span>
    </span>
  </div>
  <el-dialog
    v-model="centerDialogVisible"
    title="请输入支付密码"
    width="300px"
    center
  >
    <span>
      '支付成功后30日之内同一个卡号不能再次申请，确认申请吗？'
      '申请结果将发送到您的手机上，请注意查收！2-3个工作日'
      <br />
      <el-input
        v-model="payPassword"
        placeholder="请输入支付密码"
        style="width: 150px;margin-left: 50px"
      ></el-input>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="depositSave">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  appFxied,
  apply,
  findBank,
  findFxiedPrice,
  findPrice,
} from '@/api/bank'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import router from '@/router'
const bankList = ref([])

const centerDialogVisible = ref(false)

function findBankList() {
  findBank().then(res => {
    bankList.value = res.data
    if (res.data.length>0){
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].tid == 2) {
          bankCard.value = res.data[i].bankCard
          console.log(bankCard.value)
        }
      }

    }
    findBanlane()
  })
}
findBankList()
//定期存款
const fxiedprice = ref('')
const flag = ref(false)
const message = ref("无可用余额")

function findBanlane() {
  findFxiedPrice(bankCard.value).then(res => {
    if (res.code === 500) {
      message.value = "无可用余额"
      id.value = ''
      fxiedprice.value = res.data
    } else {
      flag.value = false
      message.value = "请选择余额"
      fxiedprice.value = res.data
      id.value = ''
      console.log(res.data)

    }
  })
}

//绑定属性
const money = ref('')
const id = ref('')
const payPassword = ref('')
const bankCard = ref('')
function depositSave() {
  appFxied(bankCard.value, money.value, id.value, payPassword.value).then(
    res => {
      if (res.code === 200) {
        ElMessage({
          message: res.message,
          type: 'success',
        })
        centerDialogVisible.value = false
        router.go(0)
      } else {
        ElMessage({
          message: res.message,
          type: 'error',
        })
        centerDialogVisible.value = true
      }
    }
  )
}
</script>

<style scoped>
.content {
  background-color: #f0f9eb;
  margin: 0;
  width: 100%;
  height: 100%;
}

form {
  background-image: linear-gradient(104deg, #f1efc7, #ecf2f9);
  width: 31.25rem;
  text-align: center;
  box-shadow: #666 0px 0px 10px;
  padding-left: 20px;
}

div {
  line-height: 25px;
}

.btn {
  background-image: linear-gradient(104deg, #f1efc7, #ecf2f9);
  width: 160px;
  height: 40px;
  margin-left: 150px;
  margin-right: 15px;
  color: black;
}

.input {
  text-align: center;
  width: 230px;
  height: 30px;
}

input[type] {
  background-color: transparent;
}
</style>
